import React from 'react';
import { Card, Row, Col, Statistic, Typography } from 'antd';
import { UserOutlined, ShoppingCartOutlined, DollarOutlined } from '@ant-design/icons';

const { Title } = Typography;

const TestDashboard = () => {
  console.log('TestDashboard component rendering...');
  
  return (
    <div style={{ padding: '24px', background: '#f0f2f5', minHeight: '100vh' }}>
      <Title level={2}>测试仪表盘</Title>
      
      <Row gutter={16} style={{ marginBottom: '24px' }}>
        <Col span={8}>
          <Card>
            <Statistic
              title="总用户数"
              value={1128}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="总订单数"
              value={93}
              prefix={<ShoppingCartOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col span={8}>
          <Card>
            <Statistic
              title="总收入"
              value={112893}
              prefix={<DollarOutlined />}
              precision={2}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
      </Row>
      
      <Card title="系统状态" style={{ marginBottom: '24px' }}>
        <p>✅ 前端服务正常</p>
        <p>✅ 后端API连接正常</p>
        <p>✅ 数据库连接正常</p>
        <p>✅ 认证系统正常</p>
      </Card>
      
      <Card title="调试信息">
        <p>当前时间: {new Date().toLocaleString()}</p>
        <p>Token状态: {localStorage.getItem('admin_token') ? '已设置' : '未设置'}</p>
        <p>页面路径: {window.location.pathname}</p>
      </Card>
    </div>
  );
};

export default TestDashboard;